<ng-container *tdLoading="'DataSourcesComponent.LOADER'; color:'accent'; mode:'indeterminate'; strategy:'overlay'; type:'circle'">
  <mat-toolbar *ngIf="displayInCard">
    <mat-toolbar-row fxLayout="row" fxLayoutAlign="start center">
      <span>{{'CATALOG.DATA_SOURCES.TITLE' | translate}}</span>
      <span fxFlex="100%"></span>
      <button *ngIf="allowEdit && !readOnly" mat-raised-button class="text-upper" color="accent" uiSref="catalog.connectors">{{'CATALOG.DATA_SOURCES.CREATE' | translate}}</button>
    </mat-toolbar-row>
  </mat-toolbar>

  <ng-container *ngIf="datasources && datasources.length > 0">
    <ng-container *ngIf="displayInCard">
      <mat-card>
        <ng-container [ngTemplateOutlet]="datasourcesTemplate" [ngTemplateOutletContext]="{$implict:datasources}"></ng-container>
      </mat-card>
    </ng-container>

    <ng-container *ngIf="!displayInCard"
        [ngTemplateOutlet]="datasourcesTemplate"
        [ngTemplateOutletContext]="{$implict:datasources}">
    </ng-container>
  </ng-container>

  <div *ngIf="loading" class="connectors-empty" fxLayout="column" fxLayoutAlign="center center" style="margin-top:20vh">
    <ng-md-icon class="tc-grey-500" icon="find_in_page" size="96"></ng-md-icon>
    <h2 class="tc-grey-500" style="margin-left: 15px">Loading...</h2>
  </div>
</ng-container>

<ng-template #datasourcesTemplate let-datasources>
  <mat-list>
    <mat-list-item>
      <ng-md-icon class="push-left-sm push-right-sm" icon="search"></ng-md-icon>
      <td-search-input placeholder="Search sources" [showUnderline]="false" [debounce]="150" (searchDebounce)="search($event)" fxFlex="100%"></td-search-input>
    </mat-list-item>
    <mat-divider></mat-divider>
    <td-virtual-scroll-container #virtualScroll [style.height]="displayHeight" [data]="filteredDatasources">
      <ng-template let-datasource="row" let-last="last" tdVirtualScrollRow>
        <mat-list-item matRipple [visibleOnMouseOver]="'action-icons'" class="cursor-pointer" (click)="selectDatasource(datasource)">
          <ng-md-icon mat-list-icon
                      [icon]="datasource.connector.icon ? datasource.connector.icon : 'fa-database'"
                      [ngClass]="datasource.connector.color ? 'tc-'+datasource.connector.color : 'tc-primary'"></ng-md-icon>
          <h4 matLine>{{datasource.title}}</h4>
          <span></span>
          <div *ngIf="isEditable(datasource)" class="action-icons" fxLayout="row" style="visibility: hidden;">
            <mat-icon (click)="editDatasource($event, datasource)" title="Edit">mode_edit</mat-icon>
            <mat-icon (click)="deleteDatasource($event, datasource)" title="Delete">delete</mat-icon>
          </div>
        </mat-list-item>
        <mat-divider *ngIf="!last"></mat-divider>
      </ng-template>
    </td-virtual-scroll-container>
  </mat-list>
</ng-template>

<div *ngIf="!loading && (!datasources || datasources.length == 0)" class="connectors-empty" fxLayout="column" fxLayoutAlign="center center">
  <ng-md-icon class="tc-grey-500" icon="find_in_page" size="96"></ng-md-icon>
  <h2>{{'CATALOG.DATA_SOURCES.EMPTY.TITLE' | translate}}</h2>
  <span *ngIf="displayInCard; else catalogLink">{{'CATALOG.DATA_SOURCES.EMPTY.CREATE_TEXT' | translate}}</span>
  <ng-template #catalogLink><a uiSref="catalog" target="_blank">{{'CATALOG.DATA_SOURCES.EMPTY.CATALOG_TEXT' | translate}}</a></ng-template>
</div>
